<template>
  <div v-loading="refreshloading">
    <el-button type="success" plain @click="handleAddReward()">新增奖励</el-button>
    <h3 class="table-title">奖励表彰管理</h3>
    <el-radio-group v-model="rewardSelected" style="margin-bottom: 1rem;">
      <el-radio-button
        v-for="item in rewardList"
        :key="item.id"
        :label="item.id"
      >{{ item&&item.name }}</el-radio-button>
    </el-radio-group>
    <RewardDescription
      v-if="rewardSelectedDict&&rewardSelected"
      :data.sync="rewardSelectedDict[rewardSelected]"
      @handleDeleteReward="val=>handleDeleteReward(val)"
      @handleAddReward="val=>handleAddReward(val)"
      @handleEditReward="val => handleEditReward(val)"
    />
    <el-collapse v-loading="refreshChildrenLoading" accordion>
      <el-collapse-item v-for="item in rewardChildrenList" :key="item.id">
        <template slot="title">
          <el-tag>
            <span>{{ item&&item.name }}</span>
          </el-tag>
          <el-button
            v-if="item.name"
            type="text"
            style="margin-left: 1rem;"
            @click="handleAddReward(item)"
          >添加子属性</el-button>
          <el-button
            v-if="item.name"
            type="text"
            style="margin-left: 1rem;"
            @click="handleEditReward(item)"
          >编辑</el-button>
          <el-button
            v-if="item.name"
            type="text"
            style="margin-left: 1rem;"
            @click="handleDeleteReward(item)"
          >删除</el-button>
        </template>
        <RewardRecord
          :data="item"
          @handleDeleteReward="val=>handleDeleteReward(val)"
          @handleEditReward="val => handleEditReward(val)"
        />
      </el-collapse-item>
    </el-collapse>
    <el-dialog title="编辑表彰项目" :visible.sync="dialogFlag">
      <Form :data.sync="rewardFormData" :list.sync="rewardList" @requireRefresh="requireRefresh" />
    </el-dialog>
  </div>
</template>

<script>
import { RewardList, RewardInfo } from '@/api/zzxt/reward'
import { arrayToTree } from '@/utils'
export default {
  name: 'RewardManage',
  components: {
    Form: () => import('./Form'),
    RewardRecord: () => import('./RewardRecord'),
    RewardDescription: () => import('./RewardDescription')
  },
  data: () => ({
    refreshloading: false,
    refreshChildrenLoading: false,
    rewardList: null,
    rewardFormData: null,
    dialogFlag: false,
    rewardSelected: null,
    rewardSelectedDict: null,
    rewardChildrenList: null
  }),
  computed: {
    currentCompany() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (!val) return
        this.refresh()
      },
      immediate: true
    },
    rewardSelected: {
      handler(val) {
        if (val) this.refreshRewardChildren()
      },
      immediate: true
    }
  },
  mounted() {
    this.$store.dispatch('party/initDictionary')
  },
  methods: {
    handleDeleteReward(val) {
      this.$confirm('确定删除吗？').then(_ => {
        const obj = val
        obj.isRemoved = true
        RewardInfo(obj).then(data => {
          this.$message.success('删除成功')
          if (val.parent === null) this.refresh()
          this.refreshRewardChildren()
        })
      })
    },
    requireRefresh() {
      this.dialogFlag = false
      this.refresh()
      this.refreshRewardChildren()
    },
    refreshRewardChildren() {
      this.refreshChildrenLoading = true
      const parentId = this.rewardSelected
      const query = {
        company: this.currentCompany,
        appName: 'party-reward',
        parent: parentId
      }
      RewardList(query).then(data => {
        const list = data.list
        const trees = arrayToTree(list)
        this.rewardChildrenList = trees
        this.refreshChildrenLoading = false
      })
    },
    refresh() {
      this.refreshloading = true
      const query = { company: this.currentCompany, appName: 'party-reward' }
      RewardList(query).then(data => {
        const model = data.list
        this.rewardList = model
        const dict = {}
        model.forEach(item => {
          dict[item.id] = item
        })
        this.rewardSelectedDict = dict
        if (model.length > 0) this.rewardSelected = data.list[0].id
        this.refreshloading = false
      })
    },
    handleAddReward(val) {
      const form = val === undefined ? null : JSON.parse(JSON.stringify(val))
      if (form) {
        form.parentId = val.id
        form.name = null
        form.description = null
        form.rootFlag = false
        delete form.id
      }
      this.rewardFormData = form || {}
      this.dialogFlag = true
    },
    handleEditReward(row) {
      this.rewardFormData = row
      this.dialogFlag = true
    }
  }
}
</script>
<style scoped>
.table-title {
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
</style>
